<template>
	<view>
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">详情</block>
		</cu-navbar>
		<view class="">
			<image style="width: 100%;height: 500rpx;" :src="detail.image" mode="aspectFill"></image>
			<view class="padding-lr padding-top bg-white flex"><text class="text-cut text-bold" v-text="detail.title"></text></view>
		</view>
		<view class="cu-bar bg-white share">
			<view class="action text-mauve text-lg text-bold">￥{{ detail.pay_mode == 2 ? detail.price : '免费' }}</view>
			<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ -->
			<button class="action" open-type="share">
				<text class="cuIcon-forwardfill text-mauve"></text>
				分享
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="action">
				<text class="cuIcon-forwardfill text-mauve" @click="copyShare"></text>
				分享
			</view>
			<!-- #endif -->
		</view>
		<scroll-view scroll-x class="bg-white nav margin-top">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-mauve cur' : ''" v-for="(item, index) in tablist" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
		</scroll-view>

		<view class="padding bg-white solids-top" v-show="TabCur == 0"><u-parse :content="detail.content ? detail.content : nodes" @navigate="navigate"></u-parse></view>

		<view class="" v-show="TabCur == 1">
			<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item" v-for="(item, index) in detail.remark" :key="index">
					<view class="cu-avatar round" :style="{ backgroundImage: 'url(' + item.avatar + ')' }"></view>
					<view class="content">
						<view class="text-grey" v-text="item.nickname"></view>
						<view class="text-gray text-content text-df" v-text="item.content"></view>
					</view>
				</view>
				<view class="padding bg-white" v-if="detail.remark && detail.remark.length == 0"><u-parse :content="nodes" @navigate="navigate"></u-parse></view>
			</view>
			<view class="padding-sm solid-top text-center bg-white" v-if="detail.remark && detail.remark.length > 0">
				<button class="cu-btn bg-mauve round" @click="moreremark">查看更多</button>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-mauve"></text>
				推荐评测
			</view>
			<view class="action text-mauve" @click="goclassify">
				更多
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="padding-top bg-white">
			<view class="nav-list">
				<view class="nav-li" v-for="(item, index) in list" :key="index" @click="testDetail(item.id)">
					<image class="radius" :src="item.image" mode=""></image>
					<view class="text-cut text-bold" v-text="item.title"></view>
					<view class="text-gray">{{ item.test_num }}人已测</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar bg-white tabbar border shop solid-top">
			<view class="action" @click="gohome">
				<view class=" cuIcon-home"></view>
				首页
			</view>
			<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ -->
			<button class="action" open-type="contact">
				<view class="cuIcon-service"><view class="cu-tag badge bg-mauve"></view></view>
				客服
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 || MP-ALIPAY || APP-PLUS -->
			<button class="action alipay" @click="callphone">
				<view class="cuIcon-service"><view class="cu-tag badge bg-mauve"></view></view>
				客服
			</button>
			<!-- #endif -->
			<!-- <view class="action"> -->
				<!-- <view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车 -->
			<!-- </view> -->
			<view class="btn-group">
				<button class="cu-btn bg-mauve round shadow-blur" @click="goTest">{{ detail.pay_mode == 2 ? '立即购买' : '开始测试' }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import uParse from '@/components/feng-parse/parse.vue';
import { test } from '@/config/mixins.js';
export default {
	mixins: [test],
	components: {
		uParse
	},
	onLoad(e) {
		this.id = e.id;
		this.gettestdetail();
	},
	onShow() {
		if(this.is_first){
			this.gettestdetail();
		}
		this.is_first = true;
	},
	data() {
		return {
			is_first:false,
			TabCur: 0,
			scrollLeft: 0,
			tablist: ['测试介绍', '用户评价'],
			nodes: `<div style="width:100;text-align: center;">---暂无数据---</div>`,
			id: 0,
			list: [],
			detail: {}
		};
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		goTest() {
			this.$api
				.orderCreate({
					main_id: this.id,
					type:0
				})
				.then(res => {					
					if (res.code == 2) {
						this.$common.navigateTo(this.$ph.payment + `?order_id=${res.data.order_id}`);
					} else if(res.code){
						this.$common.navigateTo(this.$ph.test + `?test_id=${res.data.test_id}`)
					}else {
						this.$common.errorToShow(res.msg);
					}
				});
		},
		gettestdetail() {
			this.$api
				.testdetail({
					id: this.id
				})
				.then(res => {
					if (res.code) {
						this.detail = res.data;
						this.gettestlist(res.data.category_id);
						// #ifdef MP
						this.$mpShare.title = this.detail.title;
						this.$mpShare.path = this.$ph.detail + `?id=${this.id}`;
						// #endif
					}
				});
		},
		goclassify() {
			uni.switchTab({
				url: this.$ph.classify
			});
		},
		gohome() {
			uni.switchTab({
				url: this.$ph.index
			});
		},
		gettestlist(cate_id) {
			this.$api
				.testlist({
					category_id: cate_id
				})
				.then(res => {
					if (res.code) {
						this.list = this.list.concat(res.data.data);
					}
				});
		},
		moreremark() {
			this.$common.navigateTo(this.$ph.remark + `?main_id=${this.detail.id}`);
		},
		navigate(e) {
			console.log(e);
		},
		// #ifdef H5
		copyShare() {
			let p = '';
			if (window.location.href.indexOf('#') != -1) {
				p = '/#';
			}
			let href = window.location.origin + p + this.$ph.detail + `?id=${this.detail.id}`;
			if (this.$common.h5Copy(href)) {
				this.$common.successToShow('已复制分享链接');
			}
		},
		// #endif
		// #ifdef H5 || MP-ALIPAY || APP-PLUS
		callphone() {
			uni.makePhoneCall({
				phoneNumber: this.vuex_config.phone
			});
		}
		// #endif
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
.nav-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0px 20upx;
	justify-content: space-between;
}

.nav-li {
	width: 45%;
	margin: 0 2.5% 40upx;
	position: relative;
}

.nav-li image {
	width: 100%;
	height: 200upx;
}

.cu-bar.tabbar.shop {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 10;
}
.cu-bar.tabbar .btn-group{
	padding: 0 40rpx;
}
.btn-group .cu-btn{
	flex: 1;
}

/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
.cu-bar.share button::after {
	border: none;
}
.cu-bar.share button {
	background-color: transparent;
	padding-left: 0;
	padding-right: 0;
	line-height: inherit;
	border-radius: 0;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.action.alipay {
	border: none;
}
/* #endif */
</style>
